<template>
	<div class="">
		<el-row>
			<el-col :span="24" style="border-bottom: 1px solid #EEEEEE;">
				<el-form :inline="true" :model="orderFrom" class="form-inline">
					<el-form-item label="订单号" class="orderItem">
						<el-input v-model="orderFrom.order_number" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item class="orderItem">
						<el-button type="primary" icon="el-icon-search" size="small" @click="orderSubmit">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="14">
				<el-menu :default-active="activeIndex" mode="horizontal" @select="handleToggle">
					<el-menu-item index="1" class="menu-item">待支付</el-menu-item>
					<el-menu-item index="2" class="menu-item">未发货</el-menu-item>
					<el-menu-item index="3" class="menu-item">已发货</el-menu-item>
					<el-menu-item index="4" class="menu-item">已完成</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="10">
				<div class="block">
					<el-pagination @current-change="currentPage" background layout="prev, pager, next" :total="total">
					</el-pagination>
				</div>
			</el-col>
		</el-row>

		<div class="" v-if="activeIndex=='1'">
			<v-detail :content="tableData" :loading="loading"></v-detail>
		</div>

		<div class="" v-else-if="activeIndex=='2'">
			<v-detail :content="tableData" :loading="loading"></v-detail>
		</div>

		<div class="" v-else-if="activeIndex=='3'">
			<v-detail :content="tableData" :loading="loading"></v-detail>
		</div>

		<div class="" v-else-if="activeIndex=='4'">
			<v-detail :content="tableData" :loading="loading"></v-detail>
		</div>
	</div>
</template>

<script>
	import vDetail from "@/views/mall/other/order_content"; //这里引入
	export default {
		components: {
			vDetail
		},
		data() {
			return {
				loading: true,
				activeIndex: "1", //切换码
				total: 0, //总页数
				page: 1, //页数
				tableData: [], //订单数据
				orderFrom: {
					order_number: "",
				}
			}
		},
		mounted: function() {
			var that = this;
			that.getOrderList();
		},
		methods: {
			openHint(msg, type) {
				this.$message({
					message: msg,
					type: type
				})
			},
			//切换
			handleToggle(key, keyPath) {
				this.activeIndex = key;
				this.getOrderList();
			},
			//请求数据
			getOrderList() {
				var that = this;
				var status = Number(this.activeIndex);
				this.$axios.get('/shop/admin_check_order', {
						params: {
							page: this.page,
							status: status,
						}
					})
					.then(function(res) {
						if(res.data.code == 0) {
							that.tableData = res.data.data;
							that.getPageNumber();
							that.loading = false;
						} else {
							//加载失败
						}
					}).catch(function(error) {
						console.log(error);
					});
			},
			//切换页数
			currentPage(val) {
				//console.log(`当前页: ${val}`);
				this.page = Number(`${val}`);
				this.getOrderList();
				this.page=1;
			},
			//查询页数
			getPageNumber: function() {
				var that = this;
				var status = Number(this.activeIndex);
				this.$axios.get('/shop/admin_check_order_total', {
					params: {
						status: status,
					}
				}).then(function(res) {
					if(res.data.code == 0) {
						that.total = res.data.data.total;
					} else {
						that.openHint("页面加载错误", "error");
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			//搜索订单
			orderSubmit: function() {
				var that = this;
				this.$axios.get('/shop/search_order', {
						params: {
							order_number: this.orderFrom.order_number
						}
					})
					.then(function(res) {
						//console.log(res);
						if(res.data.code == 0) {
							that.tableData = res.data.data;
						}
					}).catch(function(error) {
						console.log(error);
					});

			},
		},
	}
</script>

<style scoped="scoped">
	.block {
		float: right;
		margin-top: 10px;
	}
	
	.orderItem {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.form-inline {
		margin-left: 20px;
	}
</style>